<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div>
    <div id="demo4"></div>
    <div id="demo5"></div>


    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">
        // 创建组件
        class Persion extends React.Component {

            // 若是 构造器中需要用到this.props, 则必须写super(props)
            constructor(props){
                // super(props)
                console.log('constructor', this.props)
            }


            render() {
                const { name, age, gender } = this.props
                return <h2>
                    <li>姓名: {name}</li>
                    <li>性别: {gender}</li>
                    <li>年龄: {age}</li>
                </h2>
            }

            //对props进行限制, React 15版本以后依赖 prop-types.js
            static propTypes = {
                // 对名字限制必须是字符串类型,不能为空
                name: PropTypes.string.isRequired,
                gender: PropTypes.string,
                age: PropTypes.number,
                speak: PropTypes.func
            }

            //对props设置默认值
            static defaultProps = {
                gender: '未知'
            }

        }


        // 渲染组件到页面
        // 写法1
        ReactDOM.render(<Persion name='zhang' gender='男' age={18} />, document.getElementById('demo1'))
        // 写法2
        const p1 = { name: 'li', gender: '女', age: 23 }
        ReactDOM.render(<Persion name={p1.name} gender={p1.gender} age={p1.age} />, document.getElementById('demo2'))
        // 写法3  写法2的语法糖
        const p2 = { name: 'wang', gender: '男', age: 22 }
        ReactDOM.render(<Persion {...p2} />, document.getElementById('demo3'))


        //测试prop校验
        ReactDOM.render(<Persion age="18" />, document.getElementById('demo4'))
        const p4 = { name: 'qiang', age: 23 }
        ReactDOM.render(<Persion {...p4} />, document.getElementById('demo5'))

    </script>

</body>

</html>